import "./index.scss"

/*
* x坐标：x = r * cos(angle * π / 180) + centerX
* y坐标：y = r * sin(angle * π / 180) + centerY
* */
export default function (props: Record<string, any>) {
    const angle = Math.ceil(props.speed * 180)
    const style = angle ? `animation-play-state:paused;transform: rotateZ(${angle + 270}deg);transform-origin: center;transition:transform 1s linear;` : `transform: rotateZ(270deg);transform-origin: center;transition:transform 1s linear;`
    return <div class="svg-container">
        <svg width="400" height="400">
            <defs>
                <linearGradient id="linear-gradient1">
                    <stop offset="0%" stop-color="red"/>
                    <stop offset="50%" stop-color="green"/>
                    <stop offset="100%" stop-color="blue"/>
                </linearGradient>
            </defs>
            <g>
                <line x1="25" y1="199" x2="40" y2="199" stroke="#9ca6b9" stroke-width="2"></line>
                <text x="48" y="200" font-size="12px" text-anchor="middle">0</text>
            </g>
            <g>
                <line x1="40.90" y1="110" x2="54.16" y2="117.5" stroke="#9ca6b9" stroke-width="2"></line>
                <text x="64" y="124" font-size="12px" text-anchor="middle">30</text>
            </g>
            <g>
                <line x1="110" y1="43.4" x2="117.5" y2="56.45" stroke="#9ca6b9" stroke-width="2"></line>
                <text x="122.5" y="68.45" font-size="12px" text-anchor="middle">60</text>
            </g>
            <g>
                <line x1="290" y1="43.4" x2="282.5" y2="56.45" stroke="#9ca6b9" stroke-width="2"></line>
                <text x="270" y="68" font-size="12px" text-anchor="middle">120</text>
            </g>
            <g>
                <line x1="355.88" y1="110" x2="342.89" y2="117.5" stroke="#9ca6b9" stroke-width="2"></line>
                <text x="328" y="125" font-size="12px" text-anchor="middle">150</text>
            </g>
            <g style="transform: rotate(0);transform-origin: center;">
                <line x1="200" y1="25" x2="200" y2="35" stroke="#9ca6b9" stroke-width="2"></line>
                <text x="200" y="50" font-size="12px" text-anchor="middle">90</text>
            </g>
            <g>
                <line x1="375" y1="199" x2="360" y2="199" stroke="#9ca6b9" stroke-width="2"></line>
                <text x="345" y="199" font-size="12px" text-anchor="middle">180</text>
            </g>
            <circle style="transform: rotate(-180deg);transform-origin: center;"
                    cx="200" cy="200" r="180"
                    fill="transparent"
                    stroke="url(#linear-gradient1)"
                    stroke-width="10"
                    stroke-dasharray={`${2 * 3.1416 * 180 * 0.5}, 1000`}
            ></circle>
            <g fill="#e0e0e0" id={angle ? '' : 'pointer'} style={style}>
                <polygon points="199,200 201,200 201,100 203,100 199,80 195,100 197,100">
                    {/*<animateTransform*/}
                    {/*    attributeName="transform"*/}
                    {/*    type="rotate"*/}
                    {/*    from="0 200 200"*/}
                    {/*    to="30 200 200"*/}
                    {/*    dur="5s"*/}
                    {/*    repeatCount="indefinite"/>*/}
                </polygon>
                <circle cx="200" cy="200" r="6"></circle>
            </g>
        </svg>
    </div>
}
